<template>
  <div class="chat_bg" v-if="!loading">
    <el-container height="620px">

      <el-aside height="620px" width="300px" class='el_aside'>
        <ul class="left" v-if="tableData!=''">
          <li @click="checked(item)" v-for="(item,index) in tableData" :key="index" :class="user_id==item.user_id?'left_item_active d-s-s':'left_item d-s-s'">
            <div><img class="left_item_img" :src="item.avatarUrl" alt=""></div>
            <div class="flex-1">
              <div class="left_item_name">{{item.nickName}}</div>
              <div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.type==0">
                {{item.newMessage.content}}</div>
              <div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.type==1">[图片]</div>
              <div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.type==2">[商品]</div>
            </div>
            <div v-if="item.newMessage!=null">{{DateToHM(item.newMessage.create_time)}}</div>
            <div><span class="close_chat" @click="closeChat(index)">
                <Icon class="icon-tupian" :iconname="'#icon-guanbi'"></Icon>
              </span></div>
          </li>
        </ul>
        <ul v-else>
          <div class="notable">当前尚未建立连接</div>
        </ul>
      </el-aside>
      <el-container>
        <div v-if="!is_open_socket" class="red danger_tip">当前未连接到服务器，请检查网络或者联系平台是否已开启在线客服</div>
        <el-main class='right'>
          <el-header class="chat_header">
            <div class="content_title">{{conversation}}</div>
          </el-header>
          <el-main>
            <ul class="infinite-list" style="overflow:auto" ref='container'>
              <li v-for="(item,index) in content_list" :key="index" v-if="content_list!=''">
                <div :class="item.user_id == my_id?'im_text':'im_text2'" class="m-item">
                  <img class="avatar" v-if="!item.supplier" :src="item.user.avatarUrl"></img>
                  <img class="avatar" v-else :src="item.supplier.logo.file_path"></img>
                  <div>
                    <div class="my_date">{{item.create_time}}</div>
                    <div v-if="item.type==0" :class="item.user_id == my_id?'my_content':'you_content'">
                      <div>{{item.content}}</div>
                    </div>
                    <div v-if="item.type==1" :class="item.user_id == my_id?'my_content':'you_content'">
                      <img @click="clickImg(item.content)" class="cont_img" :src="item.content"></img>
                    </div>
                    <div v-if="item.type==2" :class="item.user_id == my_id?'my_content':'you_content'">
                      <div class="product_txtitem">
                        <div>
                          <img class="pro_img" :src="JSON.parse(item.content).product_img"></img>
                        </div>
                        <div>
                          <div class="pro_txtname">{{JSON.parse(item.content).product_name}}</div>
                          <div class="pro_price">￥{{JSON.parse(item.content).product_price}}</div>
                        </div>
                      </div>
                    </div>
                    <div v-if="item.type==3" :class="item.user_id == my_id?'my_content':'you_content'">
                      <div class="product_txtitem">
                        <div>
                          <img class="pro_img" :src="JSON.parse(item.content).product_img"></img>
                        </div>
                        <div>
                          <div class="pro_txtname">{{JSON.parse(item.content).product_name}}</div>
                          <div class="pro_price">
                            ￥共计{{JSON.parse(item.content).order_num}}件商品：合计￥{{JSON.parse(item.content).order_price}}
                          </div>
                        </div>
                        <div>
                          <div class="f12 gray6">订单号:{{JSON.parse(item.content).order_no}}</div>
                          <div class="f12 gray6">创建时间:{{JSON.parse(item.content).create_time}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </el-main>
          <div v-if="user_id!=0" class="bg-white">
            <div class="p10"><span class="ml4" @click="chooseImg">
                <Icon class="icon-tupian" :iconname="'#icon-tupian'"></Icon>
              </span></div>
            <div>
              <el-input class="chat_input" resize="none" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容" v-model="content">
              </el-input>
            </div>
            <div class="pr btnbox"> <button class="send_btn" @click="sendMessage">发消息</button></div>
          </div>
        </el-main>
        <el-aside class='user_info' width="300px">
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="客户信息" name="first">
                <div>
                  <h2 class="mb18">客户信息</h2>
                  <ul>
                    <li>
                      <div class="item_top">客户名称</div>
                      <div v-if="info.nickName" class="item_btm">{{info.nickName}}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">联系方式</div>
                      <div v-if="info.mobile" class="item_btm">{{info.mobile}}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">客户地址</div>
                      <div v-if="info.city" class="item_btm">{{info.province}}省{{info.city}}市</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">客户性别</div>
                      <div v-if="info.gender==0||info.gender==1" class="item_btm">{{info.gender?'男':'女'}}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="交易订单" name="second">
                <div class="order_list">
                  <div class="order_item" v-for="(item,index) in order" :key="index">
                    <div class="order_item_top d-b-c mb8">
                      <div class="item_status blue">{{item.delivery_status.text}}</div>
                      <div>{{item.create_time}}</div>
                    </div>
                    <div class="mb8">
                      <div class="d-s-s" v-for="(proitem,proindex) in item.product" :key="proindex">
                        <div><img class="order_img" :src="proitem.image.file_path" alt=""></div>
                        <div>
                          <div>{{proitem.product_name}}</div>
                          <div v-if="proitem.is_user_grade==1">￥{{proitem.grade_product_price}}X{{proitem.total_num}}
                          </div>
                          <div v-else>￥{{proitem.product_price}}X{{proitem.total_num}}</div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div>订单编号:{{item.order_no}}</div>
                      <div>付款时间:{{formatDate(item.pay_time*1000)}}</div>
                      <div>实收款:￥{{item.pay_price}}</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

        </el-aside>
      </el-container>

      <!--上传图片-->
    </el-container>
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc"></Upload>
    <el-dialog :visible.sync="centerDialogVisible" center>
      <div>
        <img :src="chooseimg" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ServiceApi from '@/api/service.js';
  import SettingApi from '@/api/setting.js';
  import Upload from '@/components/file/Upload';
  import {
    setCookie,
    getCookie
  } from '@/utils/base';
  export default {
    data() {
      return {
        loading: false,
        path: "",
        socketTask: "",
        // 确保websocket是打开状态
        is_open_socket: false,
        content: '',
        /*列表数据*/
        tableData: [{

        }],
        pageSize: 20,
        /* 联系人页数*/
        curPage: 1,
        /* 聊天记录页数*/
        repage: 1,
        user_id: 0,
        app_id: 0,
        shop_supplier_id: 0,
        my_id: 0,
        conversation: '会话',
        content_list: [],
        /* 聊天滚动条高度*/
        scrollHeight: 0,
        nomore: false,
        isupload: false,
        /*当前图片类别*/
        type: null,
        file_path: '',
        logo_file_path: '',
        user_logo_file_path: '',
        intervalId: null,
        centerDialogVisible: false,
        chooseimg: '',
        info: {},
        activeName: "second",
        order: [],
        is_destory: false
      }
    },
    components: {
      Upload
    },
    watch: {

    },
    mounted() {
      // 初始化
      this.init();
      this.getTableList();
      this.getParams();
      const container = this.$refs.container;
      //这里的定时是为了列表首次渲染后获取scrollHeight并滑动到底部。
      setTimeout(() => {
        this.scrollHeight = container.scrollHeight;
      }, 800);
      container.addEventListener('scroll', (e) => {
        //这里的2秒钟定时是为了避免滑动频繁，节流
        setTimeout(() => {
          //滑到顶部时触发下次数据加载
          if (e.target.scrollTop == 0 && !this.nomore) {
            //将scrollTop置为10以便下次滑到顶部
            e.target.scrollTop = 10;
            //加载数据
            this.initData();
            //这里的定时是为了在列表渲染之后才使用scrollTo。
            this.$nextTick(() => {
              let scrollH = this.$refs.container.scrollHeight - this.scrollHeight;
              e.target.scrollTo(0, scrollH + 30); //-30是为了露出最新加载的一行数据
            });
          }
        }, 2000);
      });
    },
    destroyed() {
      // 销毁监听
      this.closeSocket();
    },
    methods: {
      init: function() {
        let self = this;
        if (typeof(WebSocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          let _data = getCookie('baseInfo_supplier');
          this.path = JSON.parse(getCookie('userinfo_supplier')).url;
          let json = JSON.parse(_data);
          this.shop_supplier_id = json.user.shop_supplier_id;
          this.app_id = json.user.app_id;
          this.my_id = json.user.user_id;
          // 实例化socket
          this.socketTask = new WebSocket(this.path + '/socket?user_id=' + json.user.user_id + '&usertype=supplier')
          // 监听socket连接
          this.socketTask.onopen = this.open;
          // 监听socket关闭
          this.socketTask.onclose = this.onclose;
          // 监听socket错误信息
          this.socketTask.onerror = this.error;
        }
      },
      open: function() {
        let self = this;
        console.log("socket连接成功");
        self.is_open_socket = true;
        // 开始发送心跳
        self.startHeart();
        // 注：只有连接正常打开中 ，才能正常收到消息
        self.socketTask.onmessage = this.getMessage;
      },
      startHeart() {
        let self = this;
        let data = JSON.stringify({
          type: 'ping',
          from_id: self.my_id,
          to: self.user_id
        });

        self.intervalId = setInterval(function() {
          console.log("发送心跳");
          self.send(data);
        }, 10000);
      },
      /*socket关闭*/
      onclose() {
        let self = this;
        if(self.is_destory){
          return;
        }

        console.log("已经被关闭了");
        //重连机制
        self.socketTask = null;
        self.is_open_socket = false;
        clearInterval(self.intervalId);
        self.init();
      },
      error: function() {
        console.log("连接错误");
      },
      closeSocket: function() {
        let self = this;
        self.is_destory = true;
        if (self.socketTask == null) {
          return;
        }
        let data = JSON.stringify({
          type: 'close',
          from_id: self.my_id,
          to: self.user_id
        });
        self.send(data);
        self.socketTask.close();
        self.socketTask = null;
        self.is_open_socket = false;
        clearInterval(self.intervalId);
      },
      getMessage: function(msg) {
        let newdata = JSON.parse(msg.data);
        console.log(newdata);
        let date = new Date()
        if (newdata.from_id == this.user_id && newdata.type != 'init' && newdata.type != 'ping') {
          let item = {
            content: newdata.content,
            user_id: newdata.from_id,
            type: newdata.type,
            create_time: this.formatDate(),
            user: {
              avatarUrl: this.user_logo_file_path
            }
          }
          this.content_list = [...this.content_list, item];
          this.$nextTick(() => {
            this.$refs.container.scrollTop = this.$refs.container.scrollHeight;
          });
        }
        //绑定用户
        if (newdata.type == 'init') {
          ServiceApi.bindUid({
            client_id: newdata.client_id,
          }, true).then(res => {
            console.log("init---绑定uid")
          });
        }
        if (!newdata.content) {
          return false
        }
        if (this.tableData.length >= 1) {
          let flag = false;
          let n = 0;
          this.tableData.forEach((olditem, index) => {
            if (olditem.user_id == newdata.from_id) {
              flag = true;
              n = index;
            }
          })
          if (flag) {
            if (newdata.type != 'init' && newdata.type != 'ping') {
              this.tableData[n].newMessage.content = newdata.content;
              this.tableData[n].newMessage.type = newdata.type;
              this.tableData[n].newMessage.create_time = this.formatDate();
            }
            this.relist();
          } else {
            if (newdata.from_id && newdata.type != 'init' && newdata.type != 'ping') {
              ServiceApi.getinfo({
                user_id: newdata.from_id
              }, true).then(res => {
                this.tableData.unshift({
                  avatarUrl: res.data.data.userInfo.avatarUrl,
                  nickName: res.data.data.userInfo.nickName,
                  user_id: res.data.data.userInfo.user_id,
                  newMessage: {
                    content: newdata.content,
                    create_time: newdata.time,
                    type: newdata.type
                  }
                })
              });
            }
          }
        } else {
          ServiceApi.getinfo({
            user_id: newdata.from_id
          }, true).then(res => {
            this.tableData.unshift({
              avatarUrl: res.data.data.userInfo.avatarUrl,
              nickName: res.data.data.userInfo.nickName,
              user_id: res.data.data.userInfo.user_id,
              newMessage: {
                content: newdata.content,
                create_time: newdata.time,
                type: newdata.type
              }
            })
          });
        }
        console.log('收到消息');
      },
      newData() {
        let self = this;
        let Params = {};
        Params.user_id = self.user_id;
        Params.page = 1;
        ServiceApi.recordlist(Params, true)
          .then(data => {
            self.loading = false;
            let list = data.data.list.data;
            self.content_list = [...self.content_list, list[0]];
          })
          .catch(error => {});
      },
      send(data) {
        let self = this;
        // 未连接
        if (!self.is_open_socket) {
          return;
        }
        self.socketTask.send(data);
      },
      handleClick() {},
      sendMessage() {
        let self = this;
        if (self.content == '') {
          return false
        }
        // 未连接
        if (!self.is_open_socket) {
          return;
        }
        let data = JSON.stringify({
          to: self.user_id,
          from_id: self.my_id,
          usertype: 'supplier',
          type: 0,
          content: self.content,
          app_id: self.app_id,
          muser_id: self.user_id
        })
        let newdata = JSON.parse(data)
        let date = new Date();
        let item = {
          content: newdata.content,
          user_id: newdata.from_id,
          type: newdata.type,
          create_time: self.formatDate(),
          user: {
            avatarUrl: self.logo_file_path
          }
        }
        self.content_list = [...self.content_list, item];
        self.socketTask.send(data);
        self.content = '';
        self.$nextTick(() => {
          self.tableData.forEach((item, index) => {
            if (item.user_id == newdata.to) {
              item.newMessage.content = newdata.content;
              item.newMessage.type = newdata.type;
              item.newMessage.create_time = self.formatDate();
              self.relist();
            }
          })
          self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
        });
      },
      /*获取列表*/
      getTableList() {
        let self = this;
        let Params = {};
        Params.list_rows = 100;
        Params.nickName = '';
        self.loading = true;
        ServiceApi.servicelist(Params, true)
          .then(data => {
            self.loading = false;
            self.tableData = data.data.list.data;
            if (self.tableData.length > 0) {
              self.relist();
              self.checked(self.tableData[0]);
            }
          })
      },
      initData() {
        this.repage++;
        this.getRecordlist();
      },
      getRecordlist() {
        let self = this;
        let Params = {};
        Params.user_id = self.user_id;
        Params.page = self.repage;
        ServiceApi.recordlist(Params, true)
          .then(data => {
            self.loading = false;
            let list = data.data.list.data.reverse();
            self.content_list = [...list, ...self.content_list];
            if (data.data.list.last_page <= self.repage) {
              self.nomore = true;
            }
            this.scrollHeight = this.$refs.container.scrollHeight;
            if (self.repage == 1) {
              self.$nextTick(() => {
                self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
              });
            }
          })
          .catch(error => {});
      },
      checked(item) {
        this.user_id = item.user_id;
        this.conversation = item.nickName;
        this.user_logo_file_path = item.avatarUrl;
        this.content_list = [];
        this.info = {};
        this.repage = 1;
        this.nomore = false;
        this.getRecordlist();
        this.getUserinfo();
      },
      DateToHM(string) {
        if (string) {
          var f = string.split(' ', 2);
          var t = (f[1] ? f[1] : '').split(':', 3);
          var hm = t[0] + ':' + t[1]
          return hm;
        } else {
          return '';
        }

      },
      /*选择图片*/
      chooseImg(e) {
        this.type = e;
        this.isupload = true;
      },

      /*关闭选择图片*/
      returnImgsFunc(e) {
        let self = this;
        if (e != null && e.length > 0) {
          self.file_path = e[0].file_path;
          let data = JSON.stringify({
            to: self.user_id,
            from_id: self.my_id,
            usertype: 'supplier',
            type: 1,
            content: self.file_path,
            app_id: self.app_id
          })
          let newdata = JSON.parse(data);
          let date = new Date();
          let item = {
            content: newdata.content,
            user_id: newdata.from_id,
            type: newdata.type,
            create_time: self.formatDate(),
            user: {
              avatarUrl: self.logo_file_path
            }
          }
          this.content_list = [...this.content_list, item];
          self.socketTask.send(data);
          self.$nextTick(() => {
            self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
          });
        }
        self.isupload = false;
      },
      getParams() {
        let self = this;
        SettingApi.getSupplier({}, true).then(res => {
            self.logo_file_path = res.data.model.logo.file_path;
          })
          .catch(error => {

          });
      },
      findMin(start, arr) {
        var iMin = 9999999999999999;
        var iMinIndex = -1;
        for (var i = start; i < arr.length; i++) {
          if (arr[i] < iMin) {
            iMin = arr[i];
            iMinIndex = i;
          }
        }
        return iMinIndex;
      },
      clickImg(path) {
        this.centerDialogVisible = true;
        this.chooseimg = path;
      },
      closeChat(i) {
        this.tableData.splice(i, 1)
      },
      relist() {
        let self = this;
        let arr = []
        self.tableData.forEach((item, index) => {
          if (item.newMessage != null) {
            self.dateConversion(item.newMessage.create_time);
            arr.push(self.dateConversion(item.newMessage.create_time));
          }
        })
        let list = [...self.tableData];
        for (var i = 0; i < arr.length; i++) {
          var iMinIndex = self.findMin(i, arr);
          var car;
          car = list[i];
          list[i] = list[iMinIndex];
          list[iMinIndex] = car;
        }
        self.tableData = list.reverse();
      },
      formatDate(time) {
        let date = new Date();
        if (time) {
          date = new Date(time);
        }
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        let day = date.getDate(); // 日
        let week = date.getDay(); // 星期
        let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        let hour = date.getHours(); // 时
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        let minute = date.getMinutes(); // 分
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        let second = date.getSeconds(); // 秒
        second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
        return `${year}/${month}/${day} ${hour}:${minute}`;
      },
      getUserinfo() {
        let self = this;
        ServiceApi.getinfo({
          user_id: this.user_id
        }, true).then(res => {
          self.info = res.data.data.userInfo;
          self.order = res.data.data.orderList;
        });
      },
      dateConversion(str) {
        let date = '';
        date = new Date(Date.parse(str.replace(/-/g, "/")));
        date = date.getTime();
        return date
      }
    },
  }
</script>

<style>
  .mb8 {
    margin-bottom: 8px;
  }

  .left {
    background-color: #F0F0F0;

  }

  .right {
    margin-left: 30px;
    background-color: rgba(242, 242, 242, 0.5);
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
    margin: 5px;
  }

  .left_item {
    padding: 8px 15px;
    border-bottom: 1px solid #cccccc;
    background: #F0F0F0;
  }

  .left_item_active {
    padding: 8px 15px;
    border-bottom: 1px solid #cccccc;
    background: #FFFFFF;
  }

  .left_item_img {
    width: 40px;
    height: 40px;
  }

  .left_item_name {
    font-size: 14px;
    margin-left: 10px;
  }

  .left_item_content {
    color: rgb(153, 153, 153);
    font-size: 12px;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .im_text {
    /* width: 100%; */
    display: flex;
    margin-top: 30px;
    flex-direction: row-reverse;
    position: relative;
  }

  .im_text2 {
    /* width: 100%; */
    display: flex;
    margin-top: 30px;
    position: relative;
  }

  .im_text .avatar {
    width: 40px;
    height: 40px;
    margin-left: 5px;
    border-radius: 10px;
    background-color: #000000;
    align-items: flex-start;
  }

  .im_text2 .avatar {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    border-radius: 10px;
    background-color: #000000;
    align-items: flex-start;
  }

  .you_content,
  .my_content {
    background-color: #FFFFFF;
    margin-top: 15px;
  }

  .im_text .my_content {
    max-width: 450px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
  }

  .im_text2 .my_content {
    max-width: 450px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
  }

  .im_text .you_content {
    max-width: 450px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
  }

  .im_text2 .you_content {
    max-width: 450px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
  }

  .infinite-list {
    height: 400px;
    padding: 15px;
  }

  .el-main {
    padding: 0;

  }

  .chat_header {
    border-bottom: 1px solid #CACACA;
    margin-bottom: 10px;
    line-height: 60px;
    background-color: #FFFFFF;
  }

  .content_title {
    font-size: 16px;
  }

  .my_content {
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  }

  .you_content {
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  }

  .pro_img {
    height: 100px;
    width: 100px;
    border-radius: 10px;
    background-color: #FFFFFF;
  }

  .pro_txtname {
    max-width: 100px;
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .pro_price {
    font-size: 12px;
    color: #E2231A;
  }

  .chat_input {
    border: none;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    line-height: normal;
    color: #000000;
    text-align: left;
    border-width: 0px;
    outline: none;
    margin-bottom: 10px;
    width: 95%;


  }

  .chat_input textarea {
    outline: none;
    border: none;
  }

  .send_btn {
    border-width: 0px;
    width: 100px;
    height: 40px;
    background: inherit;
    background-color: rgba(0, 110, 255, 0.898039215686275);
    border: none;
    border-radius: 2px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
    line-height: 20px;
    position: absolute;
    outline: none;
    right: 7px;
    top: 5px;
  }

  .btnbox {
    height: 50px;
    background-color: #FFFFFF;
  }

  .bg-white {
    background-color: #FFFFFF;
  }

  .cont_img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
  }

  .chat_bg {
    background: rgba(242, 242, 242, 0.5);
    margin: -16px;
    height: calc(100vh - 90px);
  }

  .el_aside {
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
    margin: 5px;
  }

  .icon-tupian:hover {
    color: #1296db;
  }

  .notable {
    text-align: center;
    background: #ffffff;
    padding: 30px;
    font-size: 17px;
  }

  .my_date {
    color: #cccccc;
    font-size: 12px;
    position: absolute;
    top: -10px;
  }

  .im_text .my_date {
    right: 45px;
  }

  .user_info {
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
    margin: 5px;
    background-color: #FFFFFF;
    padding: 30px;
  }

  .item_top {
    color: #CCCCCC;
    margin-bottom: 8px;
  }

  .item_btm {
    font-size: 13px;
    color: #333333;
    margin-bottom: 18px;
  }

  .order_img {
    width: 50px;
    height: 50px;
  }

  .order_item_top {
    background-color: #f3f3f3;
    padding: 5px 16px;
    border-radius: 6px;
    margin-top: 18px;
  }

  .danger_tip {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    text-align: center;
  }
</style>
